import React from 'react'
import { lazy, Suspense } from 'react'
import { ComponentType } from 'react'
import { RouteObject, useRoutes } from 'react-router-dom'
import NotFound from '@/components/home/notFound'
import Empty from '@/components/home/notFound/empty'
import Loading from '@/components/home/loading/saleLoading'
import FillLink from '@/components/fillLink'
import Base from '@/components/fillLink/base'

export interface IRouteType extends RouteObject {
  name: string
  component: ComponentType
  children?: IRouteType[]
}

const routeConfig: IRouteType[] = [
  {
    name: 'Index',
    path: '/',
    component: FillLink,
  },
  {
    name: 'Base',
    path: '/base',
    component: Base,
  },
  {
    name: 'Finish',
    path: '/finish',
    component: Base,
  },
  {
    name: 'DiagnosisReport',
    path: '/DiagnosisReport',
    component: lazy(() => import('@/pages/DiagnosisReport/index')),
  },
  {
    name: 'NotFound',
    path: '*',
    component: NotFound,
  },
]

const createRouteConfig = (routeList: IRouteType[]): RouteObject[] => {
  return routeList.map(({ path, component: Com, children, ...props }) => {
    return {
      path,
      element: (
        <Suspense fallback={<Loading noBorder={false} modal={true} />}>
          <Com />
        </Suspense>
      ),
      ...props,
      children: children && createRouteConfig(children),
    }
  })
}

export default createRouteConfig(routeConfig)
